<template>
  <div>
    <el-image style="width: 470px; height: 400px;" :src="path.image + user.icon" :fit="fit"></el-image>
    <el-row>
      <h4>姓名：{{user.name}}</h4>
    </el-row>
    <el-row>
      <h4>昵称：{{user.nickName}}</h4>
    </el-row>
    <el-row>
      <h4>生日：{{user.birthday}}</h4>
    </el-row>
    <el-row>
      <h4>手机号：{{user.phone}}</h4>
    </el-row>
    <el-row>
      <h4>邮箱：{{user.email}}</h4>
    </el-row>
    <el-row>
      <h4>地址：{{user.address}}</h4>
    </el-row>
      <el-row>
      <h4>用户类型：{{user.roleName}}</h4>
    </el-row>
  </div>
</template>

<script setup>
import { get } from '@/plugins/axios';
import path from './path';
import { reactive } from 'vue';
const user = reactive({
  id:null,
  name: '',
  nickName:'',
  birthday:'2000-01-01',
  phone:'',
  email:'',
  address: '',
  password:'',
  state:0,
  icon:'/images/morentouxiang.jpg',
  roleId: 2,
  roleName: null
})
const props = defineProps(['id'])
getUser()
function getUser(){
  get(path.get,{id:props.id},content =>{
    for(let key in user){
      // 将后端没有的属性的数据排除掉
      if(Object.prototype.hasOwnProperty.call(content,key)){
        user[key] = content[key]
      }
    }
    getRole()
  })
}
// 获取角色类型
function getRole(){
  get('/role/arr',{ id: user.roleId},content => {
    user.roleName = content[0].name
    console.dir(user)
  })
}

</script>

<style scoped lang="scss">
 .el-row{
  margin-top: 20px;
 }
</style>